<template>
	<view class="calendar">
		<view class="top-bar">
			<!-- <image class="top-change-month" @click="turning('prev')" src="../../static/attend-calendar/attendance_left.png"></image> -->
			<image class="top-change-month" @click="turning('prev')" src="https://oss.szsportscenter.cn/img/zx12.png"></image>
			<view class="top-bar-ym">{{ y }}{{ text.year }}{{ m + 1 }}{{ text.month }}</view>
			<!-- <image class="top-change-month" @click="turning('next')" src="../../static/attend-calendar/attendance_right.png"></image> -->
			<image class="top-change-month" @click="turning('next')" src="https://oss.szsportscenter.cn/img/zx13.png"></image>
		</view>

		<view class="week">
			<view class="week-day" v-for="(item, index) in weekDay" :key="index">{{ item }}</view>
		</view>

		<view :class="{ hide: !monthOpen }" class="content" :style="{ height: height }">
			<view :style="{ top: positionTop + 'upx' }" class="days">
				<view class="item" v-for="(item, index) in dates" :key="index">
					<!-- <view class="day" @click="selectOne(item, $event)" 
						:class="{ choose: choose == `${item.year}-${item.month + 1}-${item.date}`, nolm: !item.lm }">
						{{ item.date }}</view> -->
					<view class="day" @click="selectOne(item, $event)"
						:class="{ choose: choose == `${item.year}-${item.month + 1}-${item.date}`}">
						{{ item.date }}</view>
				<!-- 	<view class="day choose1" @click="selectOne(item, $event)" v-if="isTruancyed(item.year, item.month + 1, item.date)"
						:class="{ choose: choose == `${item.year}-${item.month + 1}-${item.date}`}">
						{{ item.date }}</view>
					<view class="day choose2" @click="selectOne(item, $event)" v-if="omcddates(item.year, item.month + 1, item.date)"
						:class="{ choose: choose == `${item.year}-${item.month + 1}-${item.date}` }">
						{{ item.date }}</view>
					<view class="day" @click="selectOne(item, $event)" v-if="isToday(item.year, item.month, item.date)"
						:class="{ choose: choose == `${item.year}-${item.month + 1}-${item.date}`, nolm: !item.lm }">
						{{ item.date }}</view>	
					<view class="day" @click="selectOne(item, $event)" v-else
						:class="{ choose: choose == `${item.year}-${item.month + 1}-${item.date}`, nolm: !item.lm }">
						{{ item.date }}</view>	 -->	
						
					<!-- <view class="day" @click="selectOne(item, $event)">
						<view class="choose" v-if="isToday(item.year, item.month, item.date)">
							{{ item.date }}
						</view>
						<view class="choose1" v-if="isLateed(item.year, item.month, item.date)">
							{{ item.date }}
						</view>
						<view class="choose2" v-if="isTruancyed(item.year, item.month, item.date)">
							{{ item.date }}
						</view>
					</view> -->
					
					<!-- <view class="day1" @click="selectOne(item, $event)"
						v-if="isToday(item.year, item.month, item.date)">
						{{ item.date }}
					</view>
					<view class="day2" @click="selectOne(item, $event)"
						v-if="isLateed(item.year, item.month, item.date)">
						{{ item.date }}
					</view>
					<view class="day3" @click="selectOne(item, $event)"
						v-if="isTruancyed(item.year, item.month, item.date)">
						{{ item.date }}
					</view> -->
					
						
					<!-- <view class="late" v-if="isLateed(item.year, item.month + 1, item.date)">迟</view>
					<view class="truancy" v-if="isTruancyed(item.year, item.month + 1, item.date)">旷</view>
					<view class="today-text" v-if="isToday(item.year, item.month, item.date)">今</view> -->
				</view>
			</view>
		</view>

	<!-- 	<image src="/static/attend-calendar/attendance-arrow-up.png" mode="scaleToFill" @click="trgWeek()" class="weektoggel"
			:class="{ down: !monthOpen }"></image> -->
	</view>
</template>

<script>
	export default {
		name: 'attend-calendar',
		props: {
			// 第一列星期几
			weekstart: {
				type: Number,
				default: 1
			},
			// 只有迟到的日期
			lateddates: {
				type: Array,
				default: () => []
			},
			// 有旷课的日期
			truancyeddates: {
				type: Array,
				default: () => []
			},
			chidaodates: {
				type: Array,
				default: () => []
			},
			// 是否展开
			open: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				text: {
					year: '年',
					month: '月',
					week: ['一', '二', '三', '四', '五', '六', '日'],
					today: '今'
				},
				y: new Date().getFullYear(), // 年
				m: new Date().getMonth(), // 月
				dates: [], // 当前月日期集合
				positionTop: 0,
				monthOpen: true,
				choose: '',
			}
		},
		created() {
		this.dates = this.monthDay(this.y, this.m)
		!this.open && this.trgWeek()
		},
		mounted() {
			let date = new Date()
			let y = date.getFullYear()
			let m = date.getMonth()
			let d = date.getDate()
			this.choose = `${y}-${m + 1}-${d}`
		},
		computed: {
			// 顶部星期栏目
			weekDay() {
				return this.text.week.slice(this.weekstart - 1).concat(this.text.week.slice(0, this.weekstart - 1))
			},
			height() {
				return (this.dates.length / 7) * 80 + 'upx'
			}
		},
		methods: {
			// 获取当前月份天数
			monthDay(y, m) {
				let firstDayOfMonth = new Date(y, m, 1).getDay() // 当月第一天星期几
				let lastDateOfMonth = new Date(y, m + 1, 0).getDate() // 当月最后一天
				let lastDayOfLastMonth = new Date(y, m, 0).getDate() // 上一月的最后一天
				let dates = [] // 所有渲染日历
				let weekstart = this.weekstart == 7 ? 0 : this.weekstart // 方便进行日期计算，默认星期从0开始
				let startDay = (() => {
					// 周初有几天是上个月的
					if (firstDayOfMonth == weekstart) {
						return 0
					} else if (firstDayOfMonth > weekstart) {
						return firstDayOfMonth - weekstart
					} else {
						return 7 - weekstart + firstDayOfMonth
					}
				})()
				let endDay = 7 - ((startDay + lastDateOfMonth) % 7) // 结束还有几天是下个月的
				for (let i = 1; i <= startDay; i++) {
					dates.push({
						date: lastDayOfLastMonth - startDay + i,
						day: weekstart + i - 1 || 7,
						month: m - 1 >= 0 ? m - 1 : 12,
						year: m - 1 >= 0 ? y : y - 1
					})
				}
				for (let j = 1; j <= lastDateOfMonth; j++) {
					dates.push({
						date: j,
						day: (j % 7) + firstDayOfMonth - 1 || 7,
						month: m,
						year: y,
						lm: true
					})
				}
				for (let k = 1; k <= endDay; k++) {
					dates.push({
						date: k,
						day: (lastDateOfMonth + startDay + weekstart + k - 1) % 7 || 7,
						month: m + 1 <= 11 ? m + 1 : 0,
						year: m + 1 <= 11 ? y : y + 1
					})
				}
				return dates
			},
			// 迟到处理
			isLateed(y, m, d) {
				let flag = false
				for (let i = 0; i < this.lateddates.length; i++) {
					let dy = `${y}-${m}-${d}`
					if (this.lateddates[i] == dy) {
						flag = true
						break
					}
				}
				return flag
			},
			// 旷课处理
			isTruancyed(y, m, d) {
				let flag = false
				for (let i = 0; i < this.truancyeddates.length; i++) {
					let dy = `${y}-${m}-${d}`
					if (this.truancyeddates[i] == dy) {
						flag = true
						break
					}
				}
				return flag
			},
			
			omcddates(y, m, d) {
				let flag = false
				for (let i = 0; i < this.chidaodates.length; i++) {
					let dy = `${y}-${m}-${d}`
					if (this.chidaodates[i] == dy) {
						flag = true
						break
					}
				}
				return flag
			},
			
			isToday(y, m, d) {
				let date = new Date()
				return y == date.getFullYear() && m == date.getMonth() && d == date.getDate()
			},
			// 切换成周模式
			trgWeek() {
				this.monthOpen = !this.monthOpen
				if (this.monthOpen) {
					this.positionTop = 0
				} else {
					let index = -1
					this.dates.forEach((i, x) => {
						this.isToday(i.year, i.month, i.date) && (index = x)
					})
					this.positionTop = -((Math.ceil((index + 1) / 7) || 1) - 1) * 80
				}
			},
			// 点击回调
			selectOne(i, event) {
				let date = `${i.year}-${i.month + 1}-${i.date}`
				// if (i.month != this.m) {
				// 	console.log('不在可选范围内')
				// 	return false
				// }
				this.choose = date
				this.$emit('on-click', date)
			},
			// 上个月，下个月
			turning(_action) {
				if (_action === 'next') {
					if (this.m + 1 == 12) {
						this.m = 0
						this.y = this.y + 1
					} else {
						this.m = this.m + 1
					}
				} else {
					if (this.m + 1 == 1) {
						this.m = 11
						this.y = this.y - 1
					} else {
						this.m = this.m - 1
					}
				}

				this.dates = this.monthDay(this.y, this.m)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.calendar {
		color: #000000;
		font-size: 28upx;
		text-align: center;
		// background-image: url('https://oss.szsportscenter.cn/img/zx11.png');
		// background-size: 100% 100%;
		background-color: #FFFFFF;
		padding-bottom: 10upx;
		height: auto;
		.top-bar {
			display: flex;
			height: 70upx;
			>view {
				flex: 1;
			}
			.top-bar-ym{
				font-size: 32upx;
				height: 70upx;
				line-height: 70upx;
			}
			.top-change-month{
				// height: 80upx;
				// width: 80upx;
				// margin: 0 60upx;
				height: 40rpx;
				width: 40rpx;
				margin: 10px 120rpx;
			}
		}

		.week {
			display: flex;
			align-items: center;
			height: 70upx;
			line-height: 70upx;
			view {
				flex: 1;
			}
			.week-day{
				font-size: 24upx;
				// color: #A9C4FF;
				color: #000000;
			}
		}

		.content {
			position: relative;
			overflow: hidden;
			transition: height 0.4s ease;

			.days {
				transition: top 0.3s;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				position: relative;

				.item {
					position: relative;
					display: block;
					height: 70upx;
					line-height: 70upx;
					width: calc(100% / 7);

					.day {
						font-style: normal;
						display: inline-block;
						vertical-align: middle;
						width: 54rpx;
						height: 54rpx;
						line-height: 54rpx;
						overflow: hidden;
						border-radius: 14upx;

						&.choose {
							background: linear-gradient(270deg, #47B37B 0%, #69D19B 100%), #4BA677; !important;
							// background-size: 100% 100%;
							// background-image: url('https://oss.szsportscenter.cn/img/zx16.png') !important;
							color: #FFFFFF;
							border-radius: 50%;
							width: 54rpx;
							height: 54rpx;
						}
						&.choose1 {
							// background-image: url('https://oss.szsportscenter.cn/img/zx17.png');
							// background-size: 100% 100%;
							background-color:rgb(216, 175, 161);
							width: 54rpx;
							height: 54rpx;
							color: #FFFFFF;
							border-radius: 50%;
						}
						&.choose2 {
							// background-image: url('https://oss.szsportscenter.cn/img/zx18.png');
							// background-size: 100% 100%;
							background-color:rgb(136, 205, 172);
							width: 54rpx;
							height: 54rpx;
							color: #FFFFFF;
							border-radius: 50%;
						}

						&.nolm {
							color: #f0f0f0;
							// opacity: 0.3;
						}
					}
					.day1 {
						font-style: normal;
						display: inline-block;
						vertical-align: middle;
						width: 60upx;
						height: 60upx;
						line-height: 60upx;
						overflow: hidden;
						border-radius: 14upx;
						background-color: #2F75FA;
						color: #FFFFFF;
						border-radius: 50%;
					
						&.choose {
							background-color: #2F75FA;
							color: #FFFFFF;
							border-radius: 50%;
						}
						&.choose1 {
							background-color: #55aa00;
							color: #FFFFFF;
							border-radius: 50%;
						}
						&.choose2 {
							background-color: #ff0000;
							color: #FFFFFF;
							border-radius: 50%;
						}
					
						&.nolm {
							color: #fff;
							opacity: 0.3;
						}
					}
					.day2 {
						font-style: normal;
						display: inline-block;
						vertical-align: middle;
						width: 60upx;
						height: 60upx;
						line-height: 60upx;
						overflow: hidden;
						border-radius: 14upx;
						background-color: #55aa00;
						color: #FFFFFF;
						border-radius: 50%;
					
						&.choose {
							background-color: #2F75FA;
							color: #FFFFFF;
							border-radius: 50%;
						}
						&.choose1 {
							background-color: #55aa00;
							color: #FFFFFF;
							border-radius: 50%;
						}
						&.choose2 {
							background-color: #ff0000;
							color: #FFFFFF;
							border-radius: 50%;
						}
					
						&.nolm {
							color: #fff;
							opacity: 0.3;
						}
					}
					.day3 {
						font-style: normal;
						display: inline-block;
						vertical-align: middle;
						width: 60upx;
						height: 60upx;
						line-height: 60upx;
						overflow: hidden;
						border-radius: 14upx;
						background-color: #ff0000;
						color: #FFFFFF;
						border-radius: 50%;
					
						&.choose {
							background-color: #2F75FA;
							color: #FFFFFF;
							border-radius: 50%;
						}
						&.choose1 {
							background-color: #55aa00;
							color: #FFFFFF;
							border-radius: 50%;
						}
						&.choose2 {
							background-color: #ff0000;
							color: #FFFFFF;
							border-radius: 50%;
						}
					
						&.nolm {
							color: #fff;
							opacity: 0.3;
						}
					}

					.late {
						// bottom: 0;
						// left: 50%;
						// font-style: normal;
						// width: 12upx;
						// height: 12upx;
						// background: #F7B300;
						// border-radius: 6upx;
						// position: absolute;
						// margin-left: -6upx;
						// pointer-events: none;
						position: absolute;
						font-size: 20upx;
						font-weight: normal;
						width: 20upx;
						height: 20upx;
						line-height: 20upx;
						right: 10rpx;
						top: 10upx;
						color: #000000;
					}
					.truancy {
						// bottom: 0;
						// left: 50%;
						// font-style: normal;
						// width: 12upx;
						// height: 12upx;
						// background: #FF2222;
						// border-radius: 6upx;
						// position: absolute;
						// margin-left: -6upx;
						// pointer-events: none;
						position: absolute;
						font-size: 20upx;
						font-weight: normal;
						width: 20upx;
						height: 20upx;
						line-height: 20upx;
						right: 10rpx;
						top: 10upx;
						color: #000000;
					}

					.today-text {
						position: absolute;
						font-size: 20upx;
						font-weight: normal;
						width: 20upx;
						height: 20upx;
						line-height: 20upx;
						right: 10rpx;
						top: 10upx;
						color: #000000;
					}
				}
			}
		}

		.hide {
			height: 70upx !important;
		}

		.weektoggel {
			width: 70upx;
			height: 40upx;
			margin: 10upx auto 0;

			&.down {
				transform: rotate(180deg);
			}
		}
	}
</style>
